<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <%- include common %>
        <style>
            .mv-item {

                margin-top: 20px;
                box-sizing: border-box;
                padding: 0 10px;
            }

            .is_mine {
                background: rgba(138, 223, 238, 0.582) !important;
            }
        </style>
</head>

<body>
    <%- include('head',{title:'comment',username:username}) %>
        <div class="container">
            <h2 class="text-success">评论中心</h2>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-3" style="padding-bottom:10px;">
                        <select data-page="<%- page %>" name="" id="myselect" class="form-control">
                            <option value="10" <%- pageSize=='10' ? 'selected' :'' %> >每页10条</option>
                            <option value="20" <%- pageSize=='20' ? 'selected' :'' %> >每页20条</option>
                            <option value="30" <%- pageSize=='30' ? 'selected' :'' %> >每页30条</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table
                            class="text-center col-md-12 table table-striped table-bordered table-hover table-condensed">
                            <thead>
                                <tr>
                                    <td>序号</td>
                                    <td>评论人</td>
                                    <td>评论电影</td>
                                    <td>评论标题</td>
                                    <td>评论内容</td>
                                    <td>评论时间</td>
                                    <td>操作</td>
                                    <td>操作</td>
                                </tr>
                            </thead>
                            <tbody style="width:120px;">
                                <% if(result.length>0){ %>
                                    <% result.forEach((item,i)=>{ %>
                                        <tr class="<%- item.username == username ?'is_mine':'' %>">
                                            <td>
                                                <%- i+1 %>
                                            </td>
                                            <td class="text-danger h4">
                                                <a href="/comment/mycomment?myname=<%- item.username %>">
                                                    <%- item.username %>
                                                </a>
                                            </td>
                                            <td class="text-success ">
                                                <a href="/comment/moviecomment?cid=<%- item.cid %>">
                                                    <%- item.movie.title %>
                                                </a>
                                            </td>
                                            <td class="col-md-2">
                                                <p
                                                    style="width:120px;white-space: normal;word-break:break-all;word-wrap: break-word; ">
                                                    <a href="/comment/onecomment?_id=<%-item._id%>">
                                                        <%- item.title %>
                                                    </a>
                                                </p>
                                            </td>
                                            <td>
                                                <div
                                                    style="width:300px;white-space: normal;word-break:break-all;word-wrap: break-word; ">
                                                    <%- item.content %>
                                                </div>
                                            </td>
                                            <td>
                                                <%- forMat(item.time) %>
                                            </td>
                                            <td>
                                                <% if(item.username==username){ %>
                                                    <button data-item='<%- JSON.stringify(item) %>'
                                                        onclick="updateone(this)" data-toggle="modal"
                                                        data-target="#updatebox" class="btn btn-primary">修改</button>
                                                    <% } %>
                                            </td>
                                            <td>
                                                <button onclick="deleteone('<%- item._id %>')" data-toggle="modal"
                                                    data-target="#deletebox" class="btn btn-danger " <%-
                                                    item.username==username?'':'disabled' %> >删除</button>
                                            </td>
                                        </tr>
                                        <% }) %>
                                            <tr>
                                                <td colspan="8">
                                                    <nav aria-label="Page navigation">
                                                        <ul class="pagination">
                                                            <li class="<%- page-1<1 ? 'disabled':'' %>">
                                                                <a href="/comment/clist?page=<%- page-1 %>&pageSize=<%- pageSize %>"
                                                                    aria-label="Previous">
                                                                    <span aria-hidden="true">&laquo;</span>
                                                                </a>
                                                            </li>
                                                            <% if(page - 2>= 1){ %>
                                                                <li><a
                                                                        href="/comment/clist?page=<%- page-2 %>&pageSize=<%- pageSize %>">
                                                                        <%- page - 2 %>
                                                                    </a></li>
                                                                <% } %>

                                                                    <% if(page - 1>= 1){ %>
                                                                        <li><a
                                                                                href="/comment/clist?page=<%- page-1 %>&pageSize=<%- pageSize %>">
                                                                                <%- page - 1 %>
                                                                            </a></li>
                                                                        <% } %>

                                                                            <li class="active"><a
                                                                                    href="/comment/clist?page=<%- page %>&pageSize=<%- pageSize %>">
                                                                                    <%- page %>
                                                                                </a></li>
                                                                            <% if(page + 1 <=totalPage ){ %>
                                                                                <li><a
                                                                                        href="/comment/clist?page=<%- page+1  %>&pageSize=<%- pageSize %>">
                                                                                        <%- page + 1 %>
                                                                                    </a></li>
                                                                                <% } %>
                                                                                    <% if(page + 2 <=totalPage ){ %>
                                                                                        <li><a
                                                                                                href="/comment/clist?page=<%- page+2   %>&pageSize=<%- pageSize %>">
                                                                                                <%- page + 2 %>
                                                                                            </a></li>
                                                                                        <% } %>
                                                                                            <li
                                                                                                class="<%- page+1>totalPage ? 'disabled':'' %>">
                                                                                                <a href="/comment/clist?page=<%- page+1  %>&pageSize=<%- pageSize %>"
                                                                                                    aria-label="Next">
                                                                                                    <span
                                                                                                        aria-hidden="true">&raquo;</span>
                                                                                                </a>
                                                                                            </li>
                                                        </ul>
                                                    </nav>
                                                    <p>
                                                        <span>
                                                            第 <%- page %> 页 / 共 <%- totalPage%> 页
                                                        </span>
                                                        <span>
                                                            每页 <%- pageSize%> 条 / 共 <%- total %> 条数据
                                                        </span>
                                                    </p>
                                                </td>
                                            </tr>
                                            <% }else{ %>
                                                <tr>
                                                    <td colspan="8">
                                                        <p class="text-center text-danger h5">暂无数据,请去插入数据评论</p>
                                                    </td>
                                                </tr>
                                                <% } %>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" tabindex="-1" role="dialog" id="deletebox">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">删除提示</h4>
                    </div>
                    <div class="modal-body">
                        <p class="text-danger">你真的确定要删除这条评论吗?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" onclick="confirmDel()">确定删除</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <div class="modal fade" tabindex="-1" role="dialog" id="updatebox">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">修改评论</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="title">标题</label>
                                <input type="text" name="title" class="form-control" id="title" placeholder="Title">
                            </div>
                            <div class="form-group">
                                <label for="content">内容</label>
                                <textarea class="form-control" name="content" id="content" cols="30" rows="10"
                                    placeholder="Content"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" onclick="confirmUpdate()">确定修改</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <%- include foot %>

            <script>

                $("#myselect").on("change", function () {
                    console.log($(this).val())
                    var pageSize = $(this).val()
                    var page = $(this).attr('data-page');
                    window.location.href = '/comment/clist?page=' + page + "&pageSize=" + pageSize;
                })

                var delid = null;
                var itemone = null;
                function deleteone(_id) {
                    delid = _id;   // 内部修改  
                }

                function confirmDel() {
                    console.log(delid)
                    $.ajax({
                        url: "/comment/removeone",
                        type: "get",
                        data: {
                            _id: delid
                        },
                        success: res => {
                            if (res.code == 200) {
                                $("#deletebox").modal('toggle')
                                window.location.reload()
                            }
                        }
                    })
                }

                function updateone(that) {
                    // console.log(id,title,content);
                    console.log()
                    itemone = JSON.parse($(that).attr('data-item'))

                    $("#title").val(itemone.title)
                    $("#content").val(itemone.content)
                }

                function confirmUpdate() {
                    $.ajax({
                        url: "/comment/updateone",
                        type: "POST",
                        data: {
                            _id: itemone._id,
                            title: $("#title").val(),
                            content: $("#content").val()
                        },
                        success: res => {
                            if (res.code == 200) {
                                $("#updatebox").modal('toggle')
                                window.location.reload()
                            }
                        }
                    })
                }
            </script>
</body>

</html>